<!-- 课程主页 -->
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:input="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>焦点学苑</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/jquery-1.8.3.js"></script>
</head>
<script>
    function changeto (url) {
        window.location.href = url;
    }
</script>

<body>
    <div class="head-box">
        <div class="head wrap">
            <div class="logo fl"><a href=""><img src="/images/logo.png"></a></div>
            <div class="head-right fr">
                <div class="head-a fr">
                    <div class="head-a1 fl"><a href=""><img src="/images/tb-a.png"></a></div>
                    <div class="head-a1 fl"><a href=""><img src="/images/tb-b.png"></a></div>
                    <span th:unless="${not #strings.isEmpty(session.u?.getUid())}">
                        <div class="head-a3 login-click fl"><a href="#">登录</a></div>
                        <div class="head-a4 fl"><a href="/register.html" target="blank">注册</a></div>
                    </span>
                    <span th:if="${not #strings.isEmpty(session.u?.getUid())}">
                        <select name="" id="" class="head-a3" onchange="changeto($(this).val())">
                            <option value="" checked>我的</option>
                            <option value="/article-add.html"><a href="/blog/user/add.to"> 发表文章</a></option>
                            <option value="/ainArticleList"><a>我的作品</a></option>
                            <option value="/userConcernList"><a>我的收藏</a></option>
                        </select>
                        <a href="/logout">
                            <div class="head-a4 reg-click fl">注销</div>
                        </a>
                    </span>

                </div>
                <div class="clearfix"></div>
                <div class="nav fr">
                    <ul>
                        <li class="nav-cut"><a href="/">首页</a></li>
                        <li><a href="/blog/user/article.to">文章</a>
                            <!-- <div class="sub-nav">
                                <div class="bich-top"></div>
                                <div class="bich">
                                    <a href="">服饰</a>
                                    <a href="">美食</a>
                                    <a href="">出行</a>
                                    <a href="">约会</a>
                                </div>

                            </div> -->
                        </li>
                        <li><a href="/course/courseList">课程</a></li>
                        <li><a href="#">活动</a></li>
                        <li><a href="#">联系我们</a></li>

                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="wrap">
            <div class="tsm-height"></div>
            <div class="course-banner"><img src="/upload/course-banner.jpg"></div>
            <div class="cou-a">
                <ul>
                    <li>
                        <div class="cou-a1"><img src="/upload/course-a2.jpg">
                            <div class="cou-inside">
                                <div class="cou-href"><a href="">查看</a></div>
                            </div>
                        </div>
                        <div class="act-a2">活动主题</div>
                    </li>

                    <li>
                        <div class="cou-a1"><img src="/upload/course-a1.jpg">
                            <div class="cou-inside">
                                <div class="cou-href"><a href="">查看</a></div>
                            </div>
                        </div>
                        <div class="act-a2">活动主题</div>
                    </li>

                    <li>
                        <div class="cou-a1"><img src="/upload/course-a2.jpg">
                            <div class="cou-inside">
                                <div class="cou-href"><a href="">查看</a></div>
                            </div>
                        </div>
                        <div class="act-a2">活动主题</div>
                    </li>
                </ul>
            </div>

            <div class="cou-b">
                <div class="cou-b-title">
                    <div class="cou-b1"><img src="/images/cou-b1.jpg">课程</div>
                    <div class="cou-b2">
                        <div class="sort" id="price" th:attr="ord=${ordBy}">
                            <a name="money" style="color: white">价格</a>
                        </div>
                    </div>
                    <div class="cou-b3">
                        <div class="sort" id="hot" th:attr="ord=${ordBy}">
                            <a name="personNumber" style="color: white">最热</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cou-c">
                <ul>
                    <li th:each="course:${pageInfo.getList()}">
                        <a
                            th:onclick="funct([[${#temporals.format(course.begindate, 'yyyy-MM-dd')}]],[[${course.cid}]])">
                            <input type="hidden" name="cid" th:value="${course.cid}" />
                            <div class="kil-fl fl"><img th:src="@{|/${course.courseImage}|}"></div>
                            <div class="kil-fr fl">
                                <div class="kil-r1" th:text="${course.title}"></div>
                                <div class="kil-r2"><span
                                        th:text="${#temporals.format(course.begindate, 'yyyy-MM-dd')}"></span>-<span
                                        th:text="${#temporals.format(course.enddate, 'yyyy-MM-dd')}"></span></div>
                                <div class="kil-r3" th:text="${course.money}"></div>
                                <div class="kil-r4"><img src="/upload/cou-d.jpg"><span
                                        th:text="${course.personNumber}"></span>人在学</div>

                            </div>
                        </a>
                    </li>

                </ul>
            </div>
            <!-- 分页栏 -->
            <div class="page m-48">
                <span th:each="num:${#numbers.sequence(1,pageInfo.getPages())}">
                    <a href="#" th:onclick="getPage([[${num}]],[[${sortBy}]],[[${ordBy}]])">[(${num})]</a>
                </span>
            </div>

            <div class="act-e"><a href=""><img src="/upload/act-f.jpg"></a></div>
        </div>
    </div>

    <div class="footer">
        <div class="wrap">
            <div class="foot">
                <div class="foot-left fl">
                    <a href="">关于我们</a>
                    <a href="">加入我们</a>
                    <a href="contact.html">联系我们</a>
                    <a href="">媒体采访</a>
                </div>
                <div class="foot-c fl"><a href=""><img src="/images/foot-logo.jpg"></a></div>
                <div class="foot-right fr">
                    <a href="">同城活动</a>
                    <a href="">课程资讯</a>
                    <a href="">最新发布</a>
                    <a href="">热门文章</a>
                </div>
            </div>
            <div class="foot-btm">网页制作by云邦</div>
        </div>
    </div>


    <!--登录注册弹窗-->
    <div class="mask"></div>
    <div class="login">
        <div class="login-title">
            <div class="login-a">登录</div>
            <div class="login-b"></div>
            <div class="login-c close">x</div>
        </div>
        <div class="login-btm">
            <div class="login-d"><input type="text" class="login-text" placeholder="注册时填写的邮箱"></div>
            <div class="login-d"><input type="password" class="login-pas" placeholder="密码"></div>
            <div class="login-d"><input type="button" class="login-btn" placeholder="登录"></div>
            <div class="login-f">
                <a href="">忘记密码</a>
                <span>还没有焦点账号?<a href="javascript:;" class="reg-href">点击注册</a></span>
            </div>
        </div>
    </div>

    <div class="reg">
        <div class="login-title">
            <div class="login-a">注册</div>
            <div class="login-b"></div>
            <div class="login-c close">x</div>
        </div>
        <div class="login-btm">
            <div class="login-d"><input type="text" class="login-text" placeholder="邮箱/手机号"></div>
            <div class="login-d"><input type="password" class="login-pas" placeholder="密码"></div>
            <div class="login-d"><input type="button" class="login-btn" placeholder="注册"></div>
            <div class="login-f">
                <a href="">忘记密码</a>
            </div>
        </div>
    </div>


    <script src="/js/Action.js"></script>
    <script>
        $(".cou-a1").hover(function () {
            $(this).find(".cou-inside").stop(true, true).animate({ top: 0 }, 500);
        }, function () {
            $(this).find(".cou-inside").stop(true, true).animate({ top: 201 }, 500);
        });
    </script>
    <script>
        $(".sort").click(function () {
            $(this).toggleClass("sort-cut")
        })
    </script>
    <script>
        $(".page a").click(function () {
            $(this).addClass("page-cut").siblings().removeClass("page-cut")

        })
    </script>

    <script>
        $(".dropdown").bind({
            click: function () {
                $(this).find(".droplist").stop().slideDown();
            },
            mouseleave: function () {
                $(this).find(".droplist").hide();
            }
        });
        $(".dropdown .droplist li").click(function () {
            $(this).parents(".dropdown").children("span").text($(this).text());
            $(this).parents(".droplist").hide().attr("data-value", $(this).attr("data-id"));
        });
    </script>

    <script>
        // 条件排序
        function mySort (sortBy, ordBy) {
            window.location.href = "/course/courseList?page=" + [[${ pageInfo.pageNum }]] + "&&sortBy=" + sortBy + "&&ordBy=" + ordBy;
        }
        // 分页函数
        function getPage (pageNum, sortBy, ordBy) {
            window.location.href = "/course/courseList?page=" + pageNum + "&&sortBy=" + sortBy + "&&ordBy=" + ordBy;
        }
        // 排序点击事件
        $(function () {
            //价格按照价格排序
            $("#price").click(function () {
                if ($("#price").attr("ord") == 'desc') {
                    mySort("money", 'asc');
                } else if ($("#price").attr("ord") == 'asc') {
                    mySort("money", 'desc');
                } else {
                    mySort("money", $("#price").attr("ord") != null ? $("#price").attr("ord") : 'desc');
                }
            })
            //按照报名人数排序
            $("#hot").click(function () {
                if ($("#price").attr("ord") == 'desc') {
                    mySort("person_number", 'asc');
                } else if ($("#price").attr("ord") == 'asc') {
                    mySort("person_number", 'desc');
                } else {
                    mySort("person_number", $("#hot").attr("ord") != null ? $("#price").attr("ord") : 'desc');
                }
            })
        })

        //课程能否报名
        function funct (t, i) {
            var begindate = t;
            var begin = new Date(begindate.replace("-", "/").replace("-", "/"));
            var cid = i;
            var myDate = new Date();
            // alert(begin > myDate)
            if (begin > myDate) {
                window.location.href = "/course/doCourseDetail?cid=" + cid;
            } else {
                alert("报名时间已过，无法报名")
            }
        }
    </script>
</body>

</html>